<!--留宿查询-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-del="handleDel">
        <template slot-scope="scope" slot="menu">
          <el-button v-if="scope.row.stayStatus===0" icon="el-icon-edit" size="mini" type="primary"
                     @click="handleDel(scope.row)">终止留宿
          </el-button>
          <el-button v-if="scope.row.stayStatus===1" icon="el-icon-edit" size="mini" type="primary"
                     @click="handleDel(scope.row)">终止留宿
          </el-button>
          <el-button v-else style="color: red" type="text">无可操作</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {ChangehistoryStayObj, historyStayObj} from '@/api/hostel/historyStay'
// import {tableOption} from '@/const/crud/hostel/historyStay'
import {mapGetters} from 'vuex'
import {HOSTEL_OUT, HOSTEL_SEX} from '@/const/Hostel'
import {PERSON_DETAILS} from "@/const/personDict";


export default {
  name: 'historyStay',
  data() {
    return {
      addOrUpdateVisible: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      // tableOption: tableOption,
      tableOption: {
        border: true,  //竖线边框
        index: true,   //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        menuAlign: 'center',  //菜单栏对齐方式
        menuWidth: 180,  //操作菜单栏的宽度
        align: 'center',  //表格列对其方式
        emptyBtnText: '重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索框长度
        // searchSpan: 5,
        addBtn: false,  //添加按钮
        delBtn: false,  //行内删除按钮
        editBtn: false,  //行内编辑按钮
        viewBtn: false,  //是否显示查看按钮
        selection: false,  //表格是否显示可选
        excelBtn: true,  //表格导出按钮是否显示
        refreshBtn: true,  //表格上面小的 刷新按钮
        columnBtn: true,  //表格上面小的 列表显隐按钮
        searchBtn: true,  //搜索按钮
        menuType: 'button',//操作栏样式为按钮
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '人员id',  //字段标题
            prop: 'stopDormId',  //字段名称
            search: false,  //搜索是否显示
            hide: true,  //展示页面是否显示
          },
          {
            label: '姓名',
            prop: 'personName',
            search: true,
            dicData: HOSTEL_OUT,  //引入字典
          }, {
            label: '学号',
            prop: 'number',
            dicData: HOSTEL_OUT,
          }, {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',  //搜索框显示类型
            dicData: HOSTEL_SEX,
            change: (value) => {
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          },{
            label: '校区',
            prop: 'campusDeptArea',
            dicData: PERSON_DETAILS,
          },
          {
            label: '年级',
            prop: 'parentName',
            dicData: HOSTEL_OUT,
          }, {
            label: '年级',
            prop: 'pid',
            type: 'select',
            hide: true,
            search: true,
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id',
            },
            // searchClearable: false,
            cascaderItem: ['deptId'],
            dicUrl: '/admin/dept/PermissionTree',
            dicFormatter: (res) => {
              let gradeArr = res.data
              let value = []
              if(gradeArr.length> 0){
                for(let i of gradeArr){
                  if(i.typeNum == "2" && i.isLock === false){
                    value.push(i)
                  }
                }
                console.log(value)
                return value
              }
            },
            rules: [
              {
                required: true,
                message: '请选择年级',
                trigger: 'blur'
              }
            ],
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '班级',
            prop: 'deptName',
            dicData: HOSTEL_OUT,
          }, {
            label: '班级',
            prop: 'deptId',
            type: 'select',
            hide: true,
            search: true,
            row: true,
            // searchClearable: false,
            /*cascaderIndex:0,*/
            dicUrl: '/campus/sysdept/detpTree/{{key}}/1,2,3',
            dicFormatter: (res) => {
              // console.log(res.data[0].children)
              return res.data[0].children;//返回字典的层级结构
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'deptId'
            },
            rules: [
              {
                required: true,
                message: '请选择班级',
                trigger: 'blur'
              }
            ],
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '楼栋',
            prop: 'buildingName',
            dicData: HOSTEL_OUT,
          },
          {
            label: '楼栋',
            prop: 'buildingId',
            hide: true,
            search: true,
            type: 'select',
            dicUrl: '/campus/building/selectAll',
            dicMethod: 'get',
            props: {
              label: 'buildingName',
              value: 'buildingId'
            },
            change: (value) => {
              this.searchForm.buildingId = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '宿舍号',
            prop: 'dormNumber',
            search: true,
            dicData: HOSTEL_OUT,
          },
          {
            label: '留宿开始时间',
            prop: 'startTime',
            type: 'datetime',
            format: 'yyyy-MM-dd',  //显示值时间格式
            valueFormat: 'yyyy-MM-dd HH:mm:ss',  //真实值的时间格式
            viewDisplay: false,
            search: false,
            dicData: HOSTEL_OUT,
          },
          {
            label: '留宿结束时间',
            prop: 'endTime',
            type: 'datetime',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            viewDisplay: false,
            search: false,
            dicData: HOSTEL_OUT,
          },
          {
            label: '修改时间',
            prop: 'updateTime',
            type: 'datetime',
            format: 'yyyy-MM-dd hh:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            viewDisplay: false,
            search: false,
            dicData: HOSTEL_OUT,
          },
          {
            label: '修改操作人',
            prop: 'operator',
            viewDisplay: false,
            search: false,
            dicData: HOSTEL_OUT,
          }, {
            label: '留宿状态',
            prop: 'stayStatus',
            viewDisplay: false,
            search: false,
            dicData: HOSTEL_OUT,
            hide: true
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      historyStayObj(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //终止退宿的操作及弹窗
    handleDel: function (row) {
      const confirmText = ['确定为:', '同学进行恢复操作吗?','恢复后,该生即为原通行时间方案权限']
      const newDatas = []
      const h = this.$createElement
      for (const i in confirmText) {
        newDatas.push(h('p', null, confirmText[i]))
      }
      this.$confirm(
          '终止留宿',
          '终止留宿',
          {
            title:'终止留宿',
            message: h('p', null, [
              h('p', {style: 'font-weight:bold;font-size:16px'}, '确定为:'),
              h('h3', null, row.parentName + row.deptName + row.personName + '同学进行恢复操作吗?'),
              h('p', {style: 'color:red'}, '恢复后,该生即为原通行时间方案权限'),
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal:false
      }).then(function () {
        return ChangehistoryStayObj(row.stopDormId)
      }).then(() => {
        this.getList(this.page)
        this.$message.success('终止留宿成功!')
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      if (form.pid !== undefined && form.deptId === undefined) {
        form.deptId = form.pid
        // console.log(form.deptId)
        this.getList(this.page, form)
        done()
      }
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/ .avue-crud__menu {
  display: none;
}

/deep/ .el-form-item__label {
  text-align: left;
}
/deep/.avue-form__row {
  padding-left: 2px !important;
  padding-right: 36px !important;
}
/deep/.avue-form__menu--center{
  text-align: left;
}
</style>
